<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="13">
        <!-- 活动标题 -->
        <el-row class="title"><i class="el-icon-s-flag"></i><b> 我发表的活动</b></el-row>
        <div class="grid-content bg-purple">
          <!-- 发表的活动列表 -->
          <el-table :data="tableData">
            <el-table-column label="活动图片"
                             align="center"
                             prop="image"
                             width="100">
              <template slot-scope="td">
                <img :src="td.row.image"
                     style="width:80px;height:80px;" />
              </template>
            </el-table-column>
            <el-table-column label="时间"
                             align="center"
                             prop="time"
                             width="120"
                             :show-overflow-tooltip='true'></el-table-column>
            <el-table-column label="活动标题"
                             align="center"
                             prop="name"
                             width="150"
                             :show-overflow-tooltip='true'></el-table-column>
            <el-table-column label="活动进度"
                             align="center"
                             width="80">
              <template slot-scope="td">
                <span v-if="td.row.result===0">
                  <b style="color:orange">未开始</b>
                </span>
                <span v-if="td.row.result===1">
                  <b style="color:green">报名中</b>
                </span>
                <span v-if="td.row.result===2">
                  <b style="color:red">已结束</b>
                </span>
              </template>
            </el-table-column>

            <el-table-column label="操作"
                             align="center">
              <template slot-scope="td">
                <el-button-group>
                  <el-button type="success"
                             size="mini"
                             @click="show(td.row)">名单</el-button>
                  <el-button type="primary"
                             size="mini"
                             @click="detail(td.row)">详情</el-button>
                  <el-button type="warning"
                             size="mini"
                             @click="showComment(td.row)">评论</el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="currentPage"
                         :page-sizes="[3, 5, 10]"
                         :page-size="size"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>

          <!-- 查看名单对话框 -->
          <el-dialog :visible.sync="dialogVisible"
                     width="60%">
            <!-- 使用子组件 -->
            <activityusers :userData="currentUsers"></activityusers>
            <span slot="footer"
                  class="dialog-footer">
              <el-button type="primary"
                         @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>

          <!-- 查看详情对话框 -->
          <el-dialog title="查看详情"
                     :visible.sync="detailVisible"
                     width="30%">
            <!-- 使用子组件 -->
            <activitydetail :activity="currentActivity"
                            v-if="refresh"></activitydetail>
            <span slot="footer"
                  class="dialog-footer">
              <el-button type="primary"
                         @click="detailVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </el-col>

      <el-col :span="11">
        <!-- 评论标题 -->
        <el-row class="title"><i class="el-icon-s-comment"></i><b> 评论</b></el-row>
        <div class="grid-content bg-purple">
          <!-- 展示选中活动的评论 -->
          <el-table :data="commentData">
            <el-table-column label="评论用户"
                             prop="user.account"
                             align="center"
                             width="100"></el-table-column>
            <el-table-column label="用户头像"
                             prop="user.image"
                             align="center"
                             width="100">
              <template slot-scope="td">
                <img :src="td.row.user.image"
                     style="width:80px;height:80px;" />
              </template>
            </el-table-column>
            <el-table-column label="用户邮箱"
                             prop="user.email"
                             align="center"></el-table-column>
            <el-table-column label="评论内容"
                             prop="content"
                             align="center"></el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination @size-change="handleSizeChangeComment"
                         @current-change="handleCurrentChangeComment"
                         :current-page="currentPageComment"
                         :page-sizes="[3, 5, 10]"
                         :page-size="sizeComment"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="totalComment">
          </el-pagination>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
//导入子组件
import activityusers from './Activity/activityusers'
import activitydetail from './Activity/activitydetail'

//导入axios
import axios from '../../../axios_config'
import http from '../../../axios_config'

export default {
  data () {
    return {
      tableData: [],           //活动列表数据
      currentActivity: {},     //当前活动
      currentUsers: [],        //用于将当前名单数据传给子组件
      refresh: true,           //强制刷新子组件
      dialogVisible: false,    //报名名单对话框是否显示
      detailVisible: false,    //详情对话框是否显示
      currentPage: 1,          //当前页
      total: 0,                //总条数
      totalPage: 0,            //总页数
      size: 5,                 //每一页大小
      commentData: [],         //评论数据
      currentPageComment: 1,   //评论当前页
      totalComment: 0,         //评论总条数
      totalPageComment: 0,     //评论总页数
      sizeComment: 5,          //评论每一页大小
      commentRow:0             //选择活动第一行
    }
  },

  methods: {
    //查看报名名单
    show (row) {
      //显示对话框
      this.dialogVisible = true;
      //发起请求查看当前活动以及报名名单
      axios.get("http://192.168.11.18:8080/activity/findActivityUsersDtoById?id=" + row.id)
        .then(res => {
          console.log(res.data.data.users);
          //赋值给currentUsers用于传给子组件
          this.currentUsers = res.data.data.users;
        });
    },
    //查看详情
    detail (row) {
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
      //显示对话框
      this.detailVisible = true;
      this.currentActivity = row;
    },
    //查看评论
    showComment (row) {
      this.findByPageComment(row);
    },
    //根据页码查询当前页数据
    findByPage () {
      http.get("http://192.168.11.18:8080/activity/userFindOwnActivity/?current=" + this.currentPage + "&size=" + this.size)
        .then(res => {
          console.log(res);
          //活动信息
          this.tableData = res.data.data;
          //分页数据
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.pageSize;
        });
    },

    //修改每一页大小
    handleSizeChange (size) {
      console.log("选择" + size);
      this.size = size;
      //发送请求获取当前页数据    page    size
      this.findByPage();
    },

    //选择第几页
    handleCurrentChange (page) {
      console.log("选择:" + page + "页");
      this.currentPage = page;
      //发送请求获取当前页数据    page    size
      this.findByPage();
    },

    //评论查看当页
    findByPageComment (row) {
      this.commentRow = row;
      axios.get("http://192.168.11.18:8080/activity/findActivityCommentByAid/?aid=" + row.id +
        "&current=" + this.currentPageComment + "&size=" + this.sizeComment)
        .then(res => {
          console.log(res);
          this.commentData = res.data.data;
          //分页数据
          this.totalComment = res.data.total;
          this.totalPageComment = res.data.totalPage;
          this.currentPageComment = res.data.currentPage;
          this.sizeComment = res.data.pageSize;
        });
    },
    //修改评论每一页大小
    handleSizeChangeComment (size) {
      console.log("选择" + size);
      this.sizeComment = size;
      //发送请求获取当前页数据    page    size
      this.findByPageComment(this.commentRow);
    },

    //选择评论第几页
    handleCurrentChangeComment (page) {
      console.log("选择:" + page + "页");
      this.currentPageComment = page;
      //发送请求获取当前页数据    page    size
      this.findByPageComment(this.commentRow);
    },
  },
  components: {
    activityusers,
    activitydetail,
  },
  mounted () {
    this.findByPage();
  }
}
</script>

<style scoped>
.title {
  margin-left: 10px;
  font-size: 20px;
}
</style>